<template>
	<view class="shop-list-wrap page-bg">
		<view class="shop-column">
			<view @click="setTabType(0)" :class="tabType===0?'shop-column__item shop-column__active':'shop-column__item'" >热销爆品</view>
			<view @click="setTabType(1)" :class="tabType===1?'shop-column__item shop-column__active':'shop-column__item'" >新品甄选</view>
			<view @click="setTabType(2)" :class="tabType===2?'shop-column__item shop-column__active':'shop-column__item'" >
				<!--  --><!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
				<view :class="sort===0?'shop-column__price':'shop-column__price2'">价格</view>
				<!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
			</view>
		</view>
		
		<shopList :items='items' :text='text'></shopList>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	import shopList from '../../components/shopList.vue'
	export default{
		data() {
			return{
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				searchKey: '',
				tabType: 0, // 热销：0，新品：1，价格：2
				sort: 0, // 升序为0，降序为1
				isSearch: false, // flase搜索页，true：搜索列表页
				text:'上拉加载更多~'
			}
			
		},
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		methods:{
			link(url) {
				this.$link(url)
			},
			setTabType(val) {
				this.pageIndex = 1
				this.items = []
				this.tabType = val
				if(val === 2) {
					// 排序
					this.sort = this.sort === 1 ? 0 : 1
				}
				this.getItems()
			},
			getItems() {
				let {searchKey, tabType, sort, pageIndex, pageSize} = this.$data
				let items = api.searchReturnPages({searchKey, tabType, sort, pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 this.items = [...this.items, ...res.items]
				}) 
			}
		},
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		},
		components:{
			shopList
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.shop-list-wrap{
		.content-20;
	}
	.shop-column{
		background-color: @f;
		.br;
		.flex-base;
		padding: 0 20upx;
		box-sizing: border-box;
		height: 80upx;
		margin-bottom: 20upx;
	}
	.shop-column__op{
		width: 10upx;
		height: 10upx;
	}
	.shop-column__active{
		color: @font-orange-color;
	}
	.shop-column__price{
		position: relative;
		padding-right: 30rpx;
		&::before{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-top: none;
			border-bottom-color: @font-orange-color;
			position: absolute;
			right: 0;
			top: 8rpx;
		}
		&::after{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-bottom: none;
			border-top-color: @font-dark-color;
			position: absolute;
			right: 0;
			bottom: 6rpx;
		}
	}
	
</style>
